<%@page import="au.com.evoCoach.dto.TeamDetails"%>
<%@page import="au.com.evoCoach.form.TeamSubmissionForm"%>
<%@page import="au.com.evoCoach.util.FrontEndUtil"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<%try {%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0048)http://www.ajaxplaza.net/dragndrop/dragndrop.htm -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Evo Coach</title>
    <script type="text/javascript" src="/evoCoach/js/jquery.js"></script>
    <script type="text/javascript" src="/evoCoach/js/jquery.dragndrop.js"></script>
    <style type="text/css">
        body,html
        {
            font-family:Calibri;
            font-size:12px;
            height:1000px;
            line-height:18px;
        }
        p
        {
        	height:30px;
        }

        .dragDiv
        {
        	width:120px;
        	background-color:#EFF7FF;
            border:1px solid #96C2F1;
            position:absolute;
            height:70px;
            left:100px;
            top:100px;
        }
        .dragDiv h5
        {
        	background-color:#B2D3F5;
            margin:1px;
        	}
        .dragDiv div
        {
        	padding:5px;
        	margin-bottom:10px;
        }
        .dest
        {
            border:1px dotted;
        	width:120px;
        	position:absolute;
            height: 70px;
            cursor: auto;
            opacity: 1;
        }
        .dest div
        {
        	padding:5px;
        	margin-bottom:10px;
        }
    </style>
    <script type="text/javascript">
    	var oldLeft = -1;
    	var oldTop = -1;
    	var oldZIndex = -1;
    	var firstMove = true;
    	
    	var possies = new Array("D1", "D2", "D3", "D4", "D5", "D6", "M1", "M2", "M3", "M4", "M5", "M6", "F1", "F2", "F3", "F4", "F5", "F6", "R1",
    	    	"RES1", "RES2", "RES3", "RES4", "RES5", "RES6", "RES7", "RES8", "RES9", "RES10",
    	    	"RES11", "RES12", "RES13", "RES14", "RES15", "RES16", "RES17", "RES18", "RES19", "RES20", "RES21");
        $().ready(function() {
            <%for (int i = 1; i <= 38; i++) {%>
            $('#player<%=i%>').Drags({
                handler: '.handler',

                onMove:function(e){
                	firstMove = false;
                	$('#player<%=i%>').css("z-index", 10000);                	
            	},

                onDrop:function(e){
            		firstMove = true;
                    var dragDivWidth = $('#player<%=i%>').css("width").replace("px", "");
				    var dragDivHeight = $('#player<%=i%>').css("height").replace("px", "");
				    var dragDivTop = $('#player<%=i%>').css("top").replace("px", "");
                    var dragDivLeft = $('#player<%=i%>').css("left").replace("px", "");

                    foundOne = false;
                    invalidMessage = "";
                    playerInBox = false;

                    for (i = 0; i < possies.length; i++) {
						var destLeft = $('#' + possies[i]).css("left").replace("px", "");
						var destTop = $('#' + possies[i]).css("top").replace("px", "");
						var destWidth = $('#' + possies[i]).css("width").replace("px", "");
						var destHeight = $('#' + possies[i]).css("height").replace("px", "");
						var destRight = Number(destLeft) + Number(destWidth);
						var destBottom = Number(destTop) + Number(destHeight);
						var dragDivRight = Number(dragDivLeft) + Number(dragDivWidth);
						var dragDivBottom = Number(dragDivTop) + Number(dragDivHeight);
						if ((dragDivRight > destLeft) && (dragDivBottom > destTop) && (dragDivLeft < destRight) && (dragDivTop < destBottom)) {
							if ($('#' + possies[i]).css("top") == document.getElementById("oldTop<%=i%>").innerHTML && $('#' + possies[i]).css("left") == document.getElementById("oldLeft<%=i%>").innerHTML) {
								break;
							}
							else if (possies[i].substr(0, 1) == "D" && document.getElementById("possies<%=i%>").innerHTML.indexOf("DEF") == -1) {
								invalidMessage = document.getElementById("content<%=i%>").innerHTML + " cannot play as a DEF";
							}
							else if (possies[i].substr(0, 1) == "M" && document.getElementById("possies<%=i%>").innerHTML.indexOf("MID") == -1) {
								invalidMessage = document.getElementById("content<%=i%>").innerHTML + " cannot play as a MID";
							}
							else if (possies[i].substr(0, 1) == "F" && document.getElementById("possies<%=i%>").innerHTML.indexOf("FWD") == -1) {
								invalidMessage = document.getElementById("content<%=i%>").innerHTML + " cannot play as a FWD";
							}
							else if (possies[i].substr(0, 1) == "R" && possies[i].substr(0, 2) != "RE" && document.getElementById("possies<%=i%>").innerHTML.indexOf("RUC") == -1) {
								invalidMessage = document.getElementById("content<%=i%>").innerHTML + " cannot play as a RUC";
							}
							else {
								if (possies[i].substr(0, 1) == "D" && document.forms[0].elements["playerPositions['" + possies[i] + "']"].value == "-1"
										&& document.forms[0].elements["playerPositions['F1']"].value != "-1"
										&& document.forms[0].elements["playerPositions['F2']"].value != "-1"
										&& document.forms[0].elements["playerPositions['F3']"].value != "-1"
										&& document.forms[0].elements["playerPositions['F4']"].value != "-1"
										&& document.forms[0].elements["playerPositions['F5']"].value != "-1"
										&& document.forms[0].elements["playerPositions['F6']"].value != "-1") {
									invalidMessage = "Cannot add another DEF as already have 6 FWD's";
									
									break;
								}
								else if (possies[i].substr(0, 1) == "F" && document.forms[0].elements["playerPositions['" + possies[i] + "']"].value == "-1"
										&& document.forms[0].elements["playerPositions['D1']"].value != "-1"
										&& document.forms[0].elements["playerPositions['D2']"].value != "-1"
										&& document.forms[0].elements["playerPositions['D3']"].value != "-1"
										&& document.forms[0].elements["playerPositions['D4']"].value != "-1"
										&& document.forms[0].elements["playerPositions['D5']"].value != "-1"
										&& document.forms[0].elements["playerPositions['D6']"].value != "-1") {
									invalidMessage = "Cannot add another FWD as already have 6 DEF's";
									
									break;
								}
								for (j = 1; j < 38; j++) {
									//move player already in the box we are moving new player to to where the new player came from
									if ($('#player' + j).css('left') == $('#' + possies[i]).css('left') && $('#player' + j).css('top') == $('#' + possies[i]).css('top')) {
										$('#player' + j).css('left', document.getElementById("oldLeft<%=i%>").innerHTML);
										$('#player' + j).css('top', document.getElementById("oldTop<%=i%>").innerHTML);
										
										document.getElementById("oldLeft" + j).innerHTML = document.getElementById("oldLeft<%=i%>").innerHTML; 
										document.getElementById("oldTop" + j).innerHTML = document.getElementById("oldTop<%=i%>").innerHTML;
										document.getElementById("oldPossie" + j).innerHTML = document.getElementById("oldPossie<%=i%>").innerHTML;
										
										if (possies[i].indexOf("RES") == -1) {
											document.forms[0].elements["playerPositions['" + document.getElementById("oldPossie<%=i%>").innerHTML + "']"].value = Number(document.getElementById('idVal' + j).innerHTML);
										}
										
										playerInBox = true;
										
										break;
									}
								}
								//move current player to new box
								$('#player<%=i%>').css("left", $('#' + possies[i]).css("left"));
								$('#player<%=i%>').css("top", $('#' + possies[i]).css("top"));
								$('#player<%=i%>').css("z-index", document.getElementById("oldZIndex<%=i%>").innerHTML);
								
								if (!playerInBox && document.getElementById("oldPossie<%=i%>").innerHTML.indexOf("RES") == -1) {
									document.forms[0].elements["playerPositions['" + document.getElementById("oldPossie<%=i%>").innerHTML + "']"].value = "-1";	
								}
								
								document.getElementById("oldPossie<%=i%>").innerHTML = possies[i];
								
								document.getElementById("oldLeft<%=i%>").innerHTML = $('#' + possies[i]).css("left");
								document.getElementById("oldTop<%=i%>").innerHTML = $('#' + possies[i]).css("top");
								
								if (possies[i].indexOf("RES") == -1) {
									document.forms[0].elements["playerPositions['" + possies[i] + "']"].value = Number(document.getElementById('idVal<%=i%>').innerHTML);
								}
								
								foundOne = true;
							}
							
							break;
						}
					}

					//if box being dragged isn't in position to go into a new box put it back where it came from
                    if (!foundOne) {
						$('#player<%=i%>').css("left", document.getElementById("oldLeft<%=i%>").innerHTML);
						$('#player<%=i%>').css("top", document.getElementById("oldTop<%=i%>").innerHTML);
						$('#player<%=i%>').css("z-index", document.getElementById("oldZIndex<%=i%>").innerHTML);
						if (invalidMessage != "") {
							setTimeout("alert(invalidMessage);", 100);
						}
					}
                }
            });
            <%}%>
        });
    </script>
</head><link rel="stylesheet" type="text/css" href="data:text/css,">
<body>
<img src="images/AFL_Field_v4.jpg">
<%=FrontEndUtil.getDivContents(((TeamSubmissionForm)request.getAttribute("teamSubmissionForm")).getPlayerPositions(), ((TeamDetails)request.getAttribute("teamDetails")).getPlayers())%>
<%=FrontEndUtil.getDivContentsNonSelectedPlayers(((TeamDetails)request.getAttribute("teamDetails")).getNonSelectedPlayers())%>

<!-- FB LINE -->
<div id="D1" class="dest" style="left: 472px; top: 140px;"></div>
<div id="D2" class="dest" style="left: 642px; top: 140px; z-index: 101"></div>
<div id="D3" class="dest" style="left: 812px; top: 140px; z-index: 102"></div>

<!-- HB LINE -->
<div id="D4" class="dest" style="left: 472px; top: 250px; z-index: 103"></div>
<div id="D5" class="dest" style="left: 642px; top: 250px; z-index: 104"></div>
<div id="D6" class="dest" style="left: 812px; top: 250px; z-index: 105"></div>

<!-- CENTRE -->
<div id="M1" class="dest" style="left: 472px; top: 370px; z-index: 106"></div>
<div id="M2" class="dest" style="left: 642px; top: 370px; z-index: 107"></div>
<div id="M3" class="dest" style="left: 812px; top: 370px; z-index: 108"></div>

<div id="R1" class="dest" style="left: 642px; top: 475px; z-index: 117"></div>

<!-- HF LINE -->
<div id="M4" class="dest" style="left: 472px; top: 580px; z-index: 109"></div>
<div id="M5" class="dest" style="left: 642px; top: 580px; z-index: 110"></div>
<div id="M6" class="dest" style="left: 812px; top: 580px; z-index: 111"></div>

<!-- FF LINE -->
<div id="F1" class="dest" style="left: 472px; top: 710px; z-index: 112"></div>
<div id="F2" class="dest" style="left: 642px; top: 710px; z-index: 113"></div>
<div id="F3" class="dest" style="left: 812px; top: 710px; z-index: 114"></div>

<!-- FOLL LINE -->
<div id="F4" class="dest" style="left: 472px; top: 820px; z-index: 115"></div>
<div id="F5" class="dest" style="left: 642px; top: 820px; z-index: 116"></div>
<div id="F6" class="dest" style="left: 812px; top: 820px; z-index: 117"></div>

<div id="RES1" class="dest" style="left: 20px; top: 20px; z-index: 118"></div>
<div id="RES2" class="dest" style="left: 170px; top: 20px; z-index: 119"></div>

<div id="RES3" class="dest" style="left: 20px; top: 115px; z-index: 120"></div>
<div id="RES4" class="dest" style="left: 170px; top: 115px; z-index: 121"></div>

<div id="RES5" class="dest" style="left: 20px; top: 210px; z-index: 122"></div>
<div id="RES6" class="dest" style="left: 170px; top: 210px; z-index: 123"></div>

<div id="RES7" class="dest" style="left: 20px; top: 305px; z-index: 124"></div>
<div id="RES8" class="dest" style="left: 170px; top: 305px; z-index: 125"></div>

<div id="RES9" class="dest" style="left: 20px; top: 400px; z-index: 126"></div>
<div id="RES10" class="dest" style="left: 170px; top: 400px; z-index: 127"></div>

<div id="RES11" class="dest" style="left: 20px; top: 495px; z-index: 128"></div>
<div id="RES12" class="dest" style="left: 170px; top: 495px; z-index: 129"></div>

<div id="RES13" class="dest" style="left: 20px; top: 590px; z-index: 130"></div>
<div id="RES14" class="dest" style="left: 170px; top: 590px; z-index: 131"></div>

<div id="RES15" class="dest" style="left: 20px; top: 685px; z-index: 132"></div>
<div id="RES16" class="dest" style="left: 170px; top: 685px; z-index: 133"></div>

<div id="RES17" class="dest" style="left: 20px; top: 780px; z-index: 134"></div>
<div id="RES18" class="dest" style="left: 170px; top: 780px; z-index: 135"></div>

<div id="RES19" class="dest" style="left: 20px; top: 875px; z-index: 136"></div>
<div id="RES20" class="dest" style="left: 170px; top: 875px; z-index: 137"></div>

<div id="RES21" class="dest" style="left: 320px; top: 20px; z-index: 138"></div>

<form:form action="submitTeamSubmission.action" commandName="teamSubmissionForm">
<form:hidden path="playerPositions['F1']" />
<form:hidden path="playerPositions['F2']" />
<form:hidden path="playerPositions['F3']" />
<form:hidden path="playerPositions['F4']" />
<form:hidden path="playerPositions['F5']" />
<form:hidden path="playerPositions['F6']" />
<form:hidden path="playerPositions['D1']" />
<form:hidden path="playerPositions['D2']" />
<form:hidden path="playerPositions['D3']" />
<form:hidden path="playerPositions['D4']" />
<form:hidden path="playerPositions['D5']" />
<form:hidden path="playerPositions['D6']" />
<form:hidden path="playerPositions['M1']" />
<form:hidden path="playerPositions['M2']" />
<form:hidden path="playerPositions['M3']" />
<form:hidden path="playerPositions['M4']" />
<form:hidden path="playerPositions['M5']" />
<form:hidden path="playerPositions['M6']" />
<form:hidden path="playerPositions['R1']" />
<br><input type="button" value="Submit" onclick="document.forms[0].submit()">
</form:form>

</body></html>

<%
} catch (Exception e) {
	e.printStackTrace();
}
%>